<template>
    <div class="base_setting">
        <div class="first_block">
            <el-collapse v-model="activeName">
                <el-collapse-item name="1">
                    <template slot="title">
                        <h4>活动详情</h4>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="2">活动名称：</el-col>
                        <el-col :span="9">
                            <el-input
                                maxlength="24"
                                type="text"
                                v-model.trim="baseSetting.name"
                                show-word-limit
                            ></el-input>
                        </el-col>
                        <el-col :span="2">行 业：</el-col>
                        <el-col :span="9">
                            <el-select
                                style="width:100%"
                                v-model="baseSetting.industry"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in industryList"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="2">活动区域：</el-col>
                        <el-col :span="9">
                            <city v-model="area" :key="updateKey" :level="2"></city>
                        </el-col>
                        <!-- <el-col :span="2">欢迎语：</el-col>
                        <el-col :span="9">
                            <el-input
                                type="text"
                                autosize
                                placeholder="请输入内容"
                                v-model="baseSetting.welcomeWords"
                            ></el-input>
                        </el-col>-->
                        <el-col :span="2">参会密码：</el-col>
                        <el-col :span="9">
                            <!-- <el-radio v-model="baseSetting.needPwd" :label="false">开放</el-radio>
                            <el-radio v-model="baseSetting.needPwd" :label="true">加密</el-radio>-->
                            <el-switch v-model="baseSetting.needPwd"></el-switch>

                            <el-input
                                v-show="baseSetting.needPwd"
                                v-model.trim="baseSetting.huDongPwd"
                                class="encrypt_input"
                                @input.native="verification"
                                placeholder="观众参与活动的密码"
                            ></el-input>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="20" v-if="false">
                        <el-col :span="2">活动密码：</el-col>
                        <el-col :span="12">
                            <el-switch v-model="baseSetting.needPwd"></el-switch>

                            <el-input
                                v-show="baseSetting.needPwd"
                                v-model="baseSetting.huDongPwd"
                                class="encrypt_input"
                                type="text"
                                placeholder="观众参与活动的密码"
                            ></el-input>
                        </el-col>
                    </el-row>-->
                </el-collapse-item>
                <el-collapse-item name="3" disabled>
                    <template slot="title">
                        <h4>区分在场与不在场观众</h4>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span @click.stop>
                            <el-switch
                                v-model="baseSetting.isLocate"
                                :active-value="1"
                                :inactive-value="0"
                            ></el-switch>
                        </span>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="2">活动现场范围：</el-col>
                        <el-col :span="8">
                            <el-input
                                v-model="location.address"
                                readonly
                                @focus="showAmap = true"
                                suffix-icon="el-icon-location-outline"
                                placeholder="活动有效地址"
                            ></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="baseSetting.range" placeholder="活动有效范围">
                                <el-option
                                    v-for="item in rangeArray"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="2">不在现场观众：</el-col>
                        <el-col :span="16">
                            <el-radio-group v-model="baseSetting.notJoin">
                                <el-radio label="1">可观看，不能互动</el-radio>
                                <el-radio label="2">完全禁止参与</el-radio>
                                <!-- <el-radio label="3">可参与部分活动</el-radio> -->
                                <!-- <el-select
                                    v-model="canJoin"
                                    placeholder="活动选择"
                                    multiple
                                    :collapse-tags="true"
                                >
                                    <el-option
                                        v-for="item in eventList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>-->
                            </el-radio-group>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="2">现场参与密码：</el-col>
                        <el-col :span="6">
                            <el-input
                                v-model="baseSetting.joinPwd"
                                type="text"
                                placeholder="观众参与活动的密码"
                                @input.native="verification"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <h4>大屏样式设置</h4>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="2">屏幕比例：</el-col>
                        <el-col :span="12">
                            <el-radio-group v-model="baseSetting.screenScale">
                                <el-radio label="16:9">16：9</el-radio>
                                <!--1920*1080  1280*1024 -->
                                <el-radio label="4:3">4：3</el-radio>
                                <el-radio label="3">
                                    自定义&nbsp;&nbsp;
                                    宽：
                                    <el-input-number
                                        style="width:90px"
                                        v-model="baseSetting.screenWidth"
                                        :disabled="baseSetting.screenScale !== '3'"
                                        controls-position="right"
                                        :min="0"
                                    ></el-input-number>&nbsp;&nbsp;
                                    高：
                                    <el-input-number
                                        style="width:90px"
                                        v-model="baseSetting.screenHeight"
                                        :disabled="baseSetting.screenScale !== '3'"
                                        controls-position="right"
                                        :min="0"
                                    ></el-input-number>
                                </el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="2">背景音乐：</el-col>
                        <el-select
                            v-model="defaultMusic"
                            placeholder="请选择"
                            multiple
                            :collapse-tags="true"
                        >
                            <el-option
                                v-for="item in musicList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                            ></el-option>
                        </el-select>
                    </el-row>
                    <bgComponent @change="bgChange" :bgdata="baseSetting.defaultSpecial"></bgComponent>
                    <el-row :gutter="20">
                        <!-- <el-col :span="2">背景选择：</el-col>
                        <el-col :span="5">
                            <el-image v-if="baseSetting.defaultBg" 
                            fit="contain"
                            :src="baseSetting.defaultBg" @click="selectImage('bg')" style="width:100%;height:120px">
                                <div slot="placeholder" class="image-slot">
                                    加载中
                                    <span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <el-button type="text" @click="selectImage('bg')">点击选择</el-button>
                                </div>
                            </el-image>
                            <el-button  v-if="!baseSetting.defaultBg" type="text" @click="selectImage('bg')">点击选择</el-button>
                            
                        </el-col>-->

                        <div style="float:left;width:350px">
                            <el-col :span="2" style="margin-right:14px;">活动logo：</el-col>
                            <div class="logo_container">
                                <el-image
                                    v-if="baseSetting.logo"
                                    fit="contain"
                                    :src="baseSetting.logo"
                                    @click="selectImage('logo')"
                                    style="width:100%;height:120px;cursor:pointer;"
                                >
                                    <div slot="placeholder" class="image-slot">
                                        加载中
                                        <span class="dot">...</span>
                                    </div>
                                    <div slot="error" class="image-slot">
                                        <el-button type="text" @click="selectImage('logo')">点击选择</el-button>
                                    </div>
                                </el-image>
                                <div class="selectBtn">
                                    <el-button
                                        v-if="!baseSetting.logo"
                                        type="text"
                                        @click="selectImage('logo')"
                                    >点击选择</el-button>
                                </div>
                            </div>
                        </div>
                        <!-- <div>
                            <div  style="font-size:14px;width:100px;float:left">logo位置：</div>
                            <div>
                                <div class="position_container">
                                    <div
                                        class="position_item"
                                        :class="{curPos:baseSetting.logoPosition == i.value}"
                                        :title="i.name"
                                        v-for="i in logoPosList"
                                        @click="selectPosition(i)"
                                    ></div>
                                </div>
                            </div>
                        </div> -->
                    </el-row>
                    <!-- <el-row :gutter="20">
                        <el-col :span="2">默认特效：</el-col>
                        <el-col :span="10">
                            <el-radio-group v-model="baseSetting.defaultSpecial">
                                <el-radio label="1">无特效（默认）</el-radio>
                                <el-radio label="2">离子</el-radio>
                                <el-radio label="3">舞动</el-radio>
                                <el-radio label="4">荧光</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>-->
                    <el-row :gutter="20">
                        <el-col :span="2">菜单样式：</el-col>
                        <el-col :span="15">
                            <el-radio-group v-model="baseSetting.menuStyle">
                                <el-radio
                                    v-for="item in menuStyleList"
                                    :label="item.key"
                                    :key="item.key"
                                >{{ item.name }}</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </div>
        <footerButtons @save="saveSetting" @cancel="reset">
            <span slot="left">
                <label>
                    大屏启动&nbsp;&nbsp;
                    <el-switch v-model="baseSetting.swich" :active-value="1" :inactive-value="0"></el-switch>
                </label>
            </span>
        </footerButtons>

        <el-dialog
            top="40px"
            :visible="picLibraryVisibly"
            width="800px"
            title="图片库"
            @close="picLibraryVisibly = false"
            append-to-body
            custom-class="library_dialog definedModal"
        >
            <imagesLibrary @selected="selectCurrentImg" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
        <el-dialog
            top="40px"
            :visible="sfxLibraryVisibly"
            width="660px"
            title="特效库"
            @close="sfxLibraryVisibly = false"
            append-to-body
            custom-class="definedModal"
        >
            <specialLibrary @selected="selectCurrent" @click="sfxLibraryVisibly = false"></specialLibrary>
        </el-dialog>
        <el-dialog
            title="定位活动现场"
            :visible.sync="showAmap"
            width="80%"
            custom-class="amap_dialog"
            @close="showAmap = false"
            @open="openAmap"
        >
            <aMap ref="aMap" :location="location"></aMap>
            <span slot="footer">
                <el-button @click="showAmap = false">取 消</el-button>
                <el-button type="primary" @click="selectLocation">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { industryList } from '@/assets/data/data';
import { logoPosList } from '@/utils/position';
import modal from '@/pages/common/modal';
import city from '@/pages/common/city';
import imagesLibrary from './library/imagesLibrary';
import specialLibrary from './library/specialLibrary';
import bgComponent from '@/pages/common/bgComponent';
import aMap from './aMap';
export default {
    name: 'baseSetting',
    components: {
        modal,
        city,
        imagesLibrary,
        specialLibrary,
        aMap,
        bgComponent,
    },
    data() {
        return {
            activeColor: this.$styleVariables.activeSwitch,
            inactiveColor: this.$styleVariables.inactiveSwitch,
            setWelcome: '',
            // bgdata:"",
            area: '',
            sceneId: '',
            defaultMusic: '',
            defaultSetting: {
                name: '',
                industry: '',
                area: '',
                needPwd: false,
                huDongPwd: '',
                isLocate: 0,
                location: {},
                range: '',
                notJoin: '',
                canJoin: '',
                joinPwd: '',

                screenScale: '16:9',
                scaled: 0, // 0 非用户自定义   1 用户自定义
                screenWidth: '',
                screenHeight: '',
                defaultBg: '',
                logo: '',
                logoPosition: 'topleft',
                defaultSpecial: '',
                defaultMusic: '',
                menuStyle: '1',
                swich: 0,
            },
            baseSetting: {
                name: '', // 场景名称
                industry: '', // 行业
                area: '', // 区域     数组计算为
                needPwd: false, // 活动是否加密
                huDongPwd: '', // 活动加密密码
                isLocate: 0, // 是否区分场外用户
                location: '', // 会议地点坐标  JSON 串
                range: '', // 会议范围
                notJoin: '1', // 不在场用户参与活动类型
                canJoin: '', // 不在场用户可参与的活动
                joinPwd: '', // 不在场用户参与活动密码

                screenScale: '16:9', //屏幕比例
                scaled: 0, // 0 非用户自定义   1 用户自定义
                screenWidth: '', // 自定义宽
                screenHeight: '', // 自定义高
                defaultBg: '',
                logo: '',
                logoPosition: '',
                defaultSpecial: '', // 默认特效
                defaultMusic: '', // 默认背景音乐
                menuStyle: '1', // 菜单样式
                swich: 0, // 活动开关
            },

            industryList: industryList,
            musicList: [
                { name: '音乐1', key: '1' },
                { name: '音乐2', key: '2' },
                { name: '音乐3', key: '3' },
                { name: '音乐4', key: '4' },
            ],
            menuStyleList: [
                { name: '黑白百搭（默认）', key: '1' },
                { name: '奢华金', key: '2' },
                { name: '富贵红', key: '3' },
                { name: '贵族紫', key: '4' },
            ],
            picLibraryVisibly: false,
            sfxLibraryVisibly: false,
            updateKey: '0',
            activeName: ['1', '2'],
            range: '',
            rangeArray: [
                { value: 100, label: '100米' },
                { value: 200, label: '200米' },
                { value: 500, label: '500米' },
                { value: 1000, label: '1000米' },
            ],
            logoPosList: logoPosList,
            canJoin: [],
            eventList: [
                { value: '1', label: '抽奖' },
                { value: '2', label: '留言' },
                { value: '3', label: '弹幕' },
                { value: '4', label: '抢红包' },
            ],
            showAmap: false,
            location: {},
            imageType: '',
        };
    },
    created() {
        this.sceneId = this.$route.query.sceneId;
        this.fetchSetting();
    },
    methods: {
        selectPosition(item) {
            console.log('item :', item);
            this.baseSetting.logoPosition = item.value;
            console.log(this.baseSetting.logoPosition);
        },
        verification(e) {
            e.target.value = e.target.value.replace(/[^a-zA-Z0-9]/gi, '');
        },
        bgChange(data, url) {
            this.baseSetting.defaultSpecial = data;
            this.baseSetting.defaultBg = url;
        },
        // 打开地图弹框的时候，重新初始化地图
        openAmap() {
            if (this.$refs.aMap) {
                this.$refs.aMap.initMap(this.location);
                this.$refs.aMap.input = '';
            }
        },
        selectImage(type) {
            this.imageType = type;
            this.picLibraryVisibly = true;
        },
        selectLocation() {
            var location = this.$refs.aMap.ok();
            if (JSON.stringify(location) !== '{}') {
                this.location = location;
                this.showAmap = false;
            }
        },
        fetchSetting() {
            this.$api.get(
                '/st_scene/query',
                { sceneId: this.sceneId },
                res => {
                    var setting = JSON.parse(
                        JSON.stringify(this.defaultSetting)
                    );
                    // 过滤空配置
                    for (const item in res) {
                        if (res[item] == null || res[item] === '') {
                            delete res[item];
                        }
                    }

                    // 扩展默认配置  音乐保存的为字符串，渲染为数组
                    if (res.defaultMusic) {
                        this.defaultMusic = res.defaultMusic.split(',');
                    }
                    // 区域地址保存的为字符串，渲染为数组
                    if (res.area) {
                        this.area = res.area.split(',');
                    }
                    // 可以参加的活动
                    if (res.canJoin) {
                        this.canJoin = res.canJoin.split(',');
                    }
                    // 会议位置信息保存为字符串，渲染为为JSON
                    if (res.location) {
                        this.location = JSON.parse(res.location);
                    }
                    // if(res.defaultBg){
                    //   this.bgdata = res.defaultBg;
                    // }

                    // 界面初始化的配置
                    this.baseSetting = _.extend(setting, res);
                    // 保存初始化默认配置
                    this.defaultSetting = JSON.parse(
                        JSON.stringify(this.baseSetting)
                    );
                    this.updateKey = '1';
                    console.log('this.baseSetting :', this.baseSetting);
                },
                err => {
                    this.$message.error('初始化设置失败！');
                }
            );
        },
        saveSetting() {
            // 音乐本地存储为数组，后台为字符串
            this.baseSetting.defaultMusic = this.defaultMusic.toString();
            this.baseSetting.area = this.area.toString();
            // 判断是否为用户自定义尺寸
            if (this.baseSetting.screenScale === '3') {
                this.baseSetting.scaled = 1;
            }
            // 将会议地址保存为JSON串
            if (this.baseSetting.isLocate) {
                this.baseSetting.location = JSON.stringify(this.location);
                this.baseSetting.canJoin = this.canJoin.toString();
            }
            this.$api.post(
                '/st_scene/update',
                this.baseSetting,
                res => {
                    this.$message.success('保存成功');
                },
                err => {
                    this.$message.error('保存失败');
                }
            );
        },
        reset() {
            this.baseSetting = JSON.parse(JSON.stringify(this.defaultSetting));
        },
        // 选中图片
        selectCurrentImg(data) {
            if (this.imageType == 'bg') {
                this.baseSetting.defaultBg = data.url;
            } else {
                this.baseSetting.logo = data.url;
            }
            console.log(data);
        },
        // 选中特效
        selectCurrent(data) {
            // this.baseSetting.defaultBg = data.url;
            console.log(data);
        },
    },
    computed: {
        isLocate() {
            return this.baseSetting.isLocate;
        },
    },
    watch: {
        isLocate(newValue, oldValue) {
            if (newValue) {
                this.activeName.push('3');
            } else {
                var index = this.activeName.findIndex(item => item === '3');
                if (index != -1) {
                    this.activeName.splice(index, 1);
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.base_setting {
    .first_block {
        @include main-content;
        .el-row {
            padding: 10px 0;
            .el-col-2 {
                white-space: nowrap;
                text-align: right;
                line-height:30px;
                width: 106px;
            }
        }
        .encrypt_input {
            width: calc(100% - 45px);
        }
        .tip {
            font-size: 12px;
            color: #999;
            line-height: 30px;
        }
        /deep/.el-collapse-item.is-disabled .el-collapse-item__header {
            cursor: auto;
            color: inherit;
        }
        .logo_container {
            width: 200px;
            float: left;
        }
        /deep/.el-collapse{
          border:0;
          .el-collapse-item:last-child{
              border-bottom:0;
          }
        }
    }

    .foot_btn {
        background-color: $main-content-bgc;
        padding: 10px 20px;
    }

    .selectBtn {
        line-height: 100px;
        text-align: center;
    }
}
/deep/.amap_dialog {
    min-height: 500px;
    max-height: 800px;
    margin-top: 5vh !important;
    height: 90vh !important;
    .el-dialog__body {
        padding: 10px 20px;
        height: calc(100% - 120px);
    }
}
.position_container {
    width: 200px;
    height: 120px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-content: space-around;
    flex-wrap: wrap;
    justify-content: space-around;
    .position_item {
        display: inline-block;
        width: 50px;
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 2px;
        cursor: pointer;
    }
    .curPos {
        background-color: #01bfe5;
    }
}
</style>